<template>
	<view>
		<view class="detail" v-for="(v, index) in oilList" :key="index" @click="goToOilDetail(v)">
			<image :src="v.storePhoto"></image>
			<view class="right">
				<view>{{ v.storeName }}</view>
				<view class="name">
					<view class="name-left">{{ v.bossName }}</view>
					<view class="name-right">{{ v.phoneNumber }}</view>
				</view>
				<view class="price">
					<uni-section title="基本用法" type="line" padding>
						<uni-rate size="18" :value="v.score" :readonly="true" />
					</uni-section>
					<view class="price_right">距离{{ v.distance }}km</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/util/http.js';
export default {
	data() {
		return {
			UserLocation: {
				latitude: 30.779795,
				longitude: 103.85457
			},
			oilList: []
		};
	},
	onLoad() {
		this.getUserNearOilStore();
	},
	methods: {
		//获取附近商家信息
		getUserNearOilStore() {
			http({
				url: '/store/getNearStore',
				data: {
					latitude: this.UserLocation.latitude,
					longitude: this.UserLocation.longitude,
					storeCategory: 4
				},
				success: (res) => {
					this.oilList = res.data.data;
				}
			});
		},
		goToOilDetail(v) {
			let myJsonString = JSON.stringify(v);
			uni.navigateTo({
				url: '../oil/oilDetail?myJson=' + myJsonString
			});
		}
	}
};
</script>

<style>
body {
	background-color: #f0eff4;
}
.detail {
	margin: 20rpx;
	display: flex;
	background-color: #ffffff;
}
.detail image {
	width: 200rpx;
	height: 150rpx;
	margin: 30rpx;
}
.right {
	margin-top: 10rpx;
	height: 150rpx;
	width: 100%;
}

.right > view:first-child {
	width: 100%;
	text-align: center;
	font-size: 20px;
	height: 40rpx;
	line-height: 40rpx;
	font-weight: bold;
}

.name {
	margin-top: 20rpx;
	display: flex;
	width: 100%;
}
.name-left {
	width: 30%;
	margin-left: 5%;
	text-align: left;
}
.name-right {
	width: 65%;
	text-align: center;
}

.price {
	margin-top: 15rpx;
	display: flex;
	width: 100%;
}
.newPrice {
	margin-left: 3%;
	width: 20%;
}
.oldPrice {
	margin-left: 2%;
	width: 20%;
	text-decoration: line-through;
	color: #868686;
}
.price_right {
	width: 50%;
	margin-right: 5%;
	text-align: right;
}
</style>
